import {GithubOutlined } from '@ant-design/icons';
import {getChannelAPI,hotTagsAPI} from '@/apis/article'
import { useEffect,useState } from 'react';
import CategoryList from './CategoryList';
import './index.scss'


function App(){
  const [hotList,setHotList]=useState([]);
  const [categories, setCategories] = useState([]);
  useEffect(() => {

    async function getHotList(){
    const res=await hotTagsAPI();
    console.log(res.data.records)
    setHotList(res.data.records)
    }
    getHotList()
    async function getList(){
      const res=await getChannelAPI();
      console.log(res.data.records)
      setCategories(res.data.records)
      // console.log(categories.categoryName)
    }
    getList()
  }, []);

  const handleClick = (record) => {
    //后续跳转
  };
  return (
    
    <div className="App">
      <div className='top'>
      <div className='hottag'><span className='hottagtext'><GithubOutlined twoToneColor="#52c41a" />热门标签</span>
      {hotList.map((hotList) => (
          <button className='hottagbutton'>
            {hotList.labelName}
            </button>
        ))}
      </div>
      </div>
     
    <h1>Category List</h1>
    <div className="category-container">
      {categories.length > 0 ? (
        categories.map((categoryGroup, index) => (
          <div key={index} className="category-group">
            {Object.values(categoryGroup).map((category, i) => (
              <CategoryList key={i} category={category} />
            ))}
          </div>
        ))
      ) : (
        <p>Loading categories...</p>
      )}
    </div>
  </div>
  );
}

export default App;